<template>
  <section class="multi-selection-action-container bcl-bg">
    <ul>
      <li>
        <div
          class="action"
          v-bind:class="{ enable: sharedPickState.messages.length > 0 }"
          @click="forwardOneByOne"
        >
          <div class="icon">
            <i class="icon-ion-forward"></i>
          </div>
          <p>{{ $t('conversation.forward_one_by_one') }}</p>
        </div>
      </li>
      <li>
        <div
          class="action"
          v-bind:class="{ enable: sharedPickState.messages.length > 0 }"
          @click="forwardComposite"
        >
          <div class="icon">
            <i class="icon-ion-quote"></i>
          </div>
          <p>{{ $t('conversation.forward_composite') }}</p>
        </div>
      </li>
      <li>
        <div
          class="action"
          v-bind:class="{ enable: sharedPickState.messages.length > 0 }"
          @click="fav"
        >
          <div class="icon">
            <i class="icon-ion-android-favorite"></i>
          </div>
          <p>{{ $t('common.fav') }}</p>
        </div>
      </li>
      <li>
        <div
          class="action"
          v-bind:class="{ enable: sharedPickState.messages.length > 0 }"
          @click="deleteMultiMessage"
        >
          <div class="icon">
            <i class="icon-ion-android-delete"></i>
          </div>
          <p>{{ $t('common.delete') }}</p>
        </div>
      </li>
      <li style="transform: translate(15px, 15px)">
        <!-- 删除按钮 -->
        <n-icon
          class="hover click"
          size="30"
          color="#C4C4C4"
          @click="hideMultiSelectionActionView"
        >
          <CloseCircleSharp></CloseCircleSharp>
        </n-icon>
      </li>
    </ul>
  </section>
</template>

<script>
import store from '../../../store'
import ForwardType from './message/forward/ForwardType'
import wfc from '../../../wfc/client/wfc'
import GroupInfo from '../../../wfc/model/groupInfo'
import ConversationInfo from '../../../wfc/model/conversationInfo'
import { CloseCircleSharp } from '@vicons/ionicons5'

export default {
  name: 'MessageMultiSelectionActionView',
  props: {
    conversationInfo: {
      type: ConversationInfo,
      required: true,
    },
  },
  data() {
    return {
      sharedPickState: store.state.pick,
    }
  },
  methods: {
    deleteMultiMessage() {
      let target = this.conversationInfo.conversation._target
      let isSuperGroup = false
      if (target instanceof GroupInfo) {
        isSuperGroup = target.superGroup === 1
      }
      let isElectron = store.state.misc.isElectron
      this.$alert({
        title: ' 删除消息',
        content: '确定删除选中的消息？',
        confirmText: isElectron ? '本地删除' : '删除',
        cancelText: isSuperGroup || !isElectron ? '取消' : '远程删除',
        cancelCallback: () => {
          if (!(isSuperGroup || !isElectron)) {
            store.deleteSelectedMessages(true)
          }
        },
        confirmCallback: () => {
          if (this.sharedPickState.isElectron) {
            store.deleteSelectedMessages(false)
          } else {
            store.deleteSelectedMessages(true)
          }
        },
      })
    },

    hideMultiSelectionActionView() {
      store.toggleMessageMultiSelection()
    },

    forwardOneByOne() {
      let messages = [...this.sharedPickState.messages]
      this.$forwardMessage({
        forwardType: ForwardType.ONE_BY_ONE,
        messages,
      })
      store.toggleMessageMultiSelection()
    },

    forwardComposite() {
      let messages = [...this.sharedPickState.messages]
      this.$forwardMessage({
        forwardType: ForwardType.COMPOSITE,
        messages,
      })
      store.toggleMessageMultiSelection()
    },

    fav() {
      let messages = [...this.sharedPickState.messages]
      this.$parent.favMessages(messages)
      store.toggleMessageMultiSelection()
    },
  },
  components: {
    CloseCircleSharp,
  },
}
</script>

<style lang="css" scoped>
.multi-selection-action-container {
  width: 100%;
  height: 184px;
  min-height: 184px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e2e2e2;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

.action {
  font-size: 12px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: lightgrey;
  pointer-events: none;
  cursor: pointer;
}

.action.enable {
  color: black;
  pointer-events: auto;
}

.action .icon {
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.action.enable .icon:active {
  background-color: lightgrey;
}

.action p {
  padding-top: 10px;
}

.action i {
  font-size: 20px;
}
</style>
